<template>
  <div class="block">
    <span class="demonstration" style="margin-right: 10px;">业务日期</span>
    <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
      style="margin-right: 10px;" @change="changeDate" />

    <span class="demonstration" style="margin-right: 10px;margin-left: 10px;">业务类型</span>
    <el-select v-model="type" placeholder="请选择" style="margin-right: 10px;">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <!-- <div> -->
    <span style="width:'250px';margin-left: 10px">
      <el-input v-model="contentLike" placeholder="请输入内容" />
      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px" @click="onSearch">搜索</el-button>
    </span>
    <!-- </div> -->
    <el-table :row-key="getRowKey" :data="tableData" style="width: 95%;margin:20px 0;"
      @selection-change="handleSelectionChange">
      <el-table-column prop="createTime" label="交易日期" width="180" />
      <el-table-column prop="tradeNumber" label="交易编号" width="150" />
      <el-table-column prop="tradeType" label="业务类型" width="120" />
      <el-table-column prop="transferAmount" label="交易金额（元）" width="120" />
      <el-table-column prop="name" label="对方姓名" width="120" />
      <el-table-column prop="currentBalance" label="交易后余额" width="120" />
      <el-table-column prop="oppositeBankCard" label="对方账号" width="200" />
      <el-table-column prop="extract" label="摘要" width="200" />
    </el-table>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="100"
        layout="->,total, sizes, prev, pager, next, jumper" :total="total" style="width: 90%;margin:20px 0;"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { getTrade } from '@/api/api'
export default {
  data() {
    return {
      options: [
        {
          value: '4',
          label: '暂不选择'
        },
        {
          value: '0',
          label: '存款'
        }, {
          value: '1',
          label: '取款'
        }, {
          value: '2',
          label: '转账'
        }, {
          value: '3',
          label: '利息结算'
        }],
      currentPage: 1, // 默认第1页
      pageSize: 5, // 默认显示5条
      total: 10,
      startTime: '',
      endTime: '',
      // 拿到的数组
      tableData: [
      ],
      date: '',
      contentLike: '',
      type: '4'
    }
  },

  created() {
    this.init()
  },

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    getRowKey(row) {
      return row.id
    },

    // 列表选择,val选中的表格行数据
    handleSelectionChange(val) {
      console.log(val)
    },
    changeDate() {
      if (this.formatDate(this.date[0]) == this.formatDate(this.date[1])) {
        this.startTime = this.formatDate(this.date[0])
      } else {
        this.startTime = this.formatDate(this.date[0])
        this.endTime = this.formatDate(this.date[1])
      }
    },
    // 清空选择的值
    clearSelect() {
      this.$refs.buyerTable.clearSelection()
    },
    formatDate(date) {
      const year1 = date.getFullYear()
      const month = date.getMonth() + 1
      const month1 = month > 9 ? month : '0' + month
      const date1 = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
      return year1 + '-' + month1 + '-' + date1
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data

    // 每页显示条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.init()
      console.log(this.pageSize) // 每页下拉显示数据
    },
    // 当前页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.init()
      console.log(this.currentPage)
    },
    init() {
      if (this.type == 4) {
        this.type = ''
      }
      getTrade({
        'currentPage': this.currentPage,
        'size': this.pageSize,
        'type': this.type,
        'startTime': this.startTime,
        'endTime': this.endTime,
        'contentLike': this.contentLike
      }).then(res => {
        console.log(res)
        if (res.data.responseStatusCode == 200) {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'success'
          })
          console.log('res.data.data.data', res.data.data.data)
          this.total = res.data.data.total
          this.currentPage = res.data.data.currentPage
          this.size = res.data.data.size
          const newData = res.data.data.data.map(item => {
            // item.createTime=this.formatDate(item.createTime,'yyyy-MM-dd hh:mm:ss')
            const dateObj = new Date(item.createTime)
            const formattedDate = new Intl.DateTimeFormat('zh-CN', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit',
              second: '2-digit',
              hour12: false
            }).format(dateObj)
            item.createTime = formattedDate
            if (item.tradeType == '0') {
              item.tradeType = '存款'
            } else if (item.tradeType == '1') {
              item.tradeType = '取款'
            } else if (item.tradeType == '2') {
              item.tradeType = '转账'
            } else {
              item.tradeType = '利息结算'
            }
            // if (item.tradeType == "2") {
              if (item.balanceChange == 1) {
                item.balanceChange = "+" + item.balanceChange
              } else {
                item.balanceChange = "-" + item.balanceChange
              }
            // }
            return item
          })
          this.tableData = newData
        } else if (res.data.responseStatusCode == 408) {
          localStorage.removeItem('token')
          localStorage.removeItem('role')
          localStorage.removeItem('username')
          localStorage.removeItem('bankCard')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        } else {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        }
      })
    },
    onSearch() {
      this.init()
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 200px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.block {
  width: 90%;
  height: 50px;
  margin: 20px auto;
}
</style>
